<!DOCTYPE HTML>
<html>
  <head>
    <title>监控系统 Home :: Logistic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="监控系统 Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
    Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="/static/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <link href="/static/css/style.css" rel='stylesheet' type='text/css' />
    <link href="/static/css/font-awesome.css" rel="stylesheet">
    <script src="/static/js/jquery.min.js"> </script>
    <!-- Mainly scripts -->
    <script src="/static/js/jquery.metisMenu.js"></script>
    <script src="/static/js/jquery.slimscroll.min.js"></script>
    <!-- Custom and plugin javascript -->
    <link href="/static/css/custom.css" rel="stylesheet">
    <script src="/static/js/custom.js"></script>
    <script src="/static/js/screenfull.js"></script>
    <script type="text/javascript">
        function func() {
            return false;
        }
      $(function () {
        $('#supported').text('Supported/allowed: ' + !!screenfull.enabled);

        if (!screenfull.enabled) {
          return false;
        }
        $('#toggle').click(function () {
          screenfull.toggle($('#container')[0]);
        });
      });
    </script>

    <!----->

    <!--pie-chart--->
    <script src="/static/js/pie-chart.js" type="text/javascript"></script>
    <script type="text/javascript">


      $(document).ready(function () {
              var val = document.getElementById("demo-pie-1").dataset.percent;
              {#var val = div.dataset.percent;#}
              {#var val = $('#demo-pie-1').dataset.percent;#}
              if (val >= 7){
                  $('#demo-pie-1').pieChart({
                    barColor: '#31DE68',
                  trackColor: '#31DE68',
                  lineCap: 'round',
                  lineWidth: 100,
                  onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent));
                  }
                });
                  $('#warning').html('无警')
              }
              else if(val >=5){
                  $('#demo-pie-1').pieChart({
                    barColor: '#d0cb2e',
                  trackColor: '#31DE68',
                  lineCap: 'round',
                  lineWidth: 100,
                  onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent));
                  }
                });
                  $('#warning').html('轻警')
              }
              else if(val >= 3){
                  $('#demo-pie-1').pieChart({
                    barColor: '#ed7a5f',
                  trackColor: '#31DE68',
                  lineCap: 'round',
                  lineWidth: 100,
                  onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent));
                  }
                });
                  $('#warning').html('中警')
              }
              else {
                  $('#demo-pie-1').pieChart({
                    barColor: '#d0321e',
                  trackColor: '#31DE68',
                  lineCap: 'round',
                  lineWidth: 100,
                  onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent));
                  }
                });
                  $('#warning').html('重警')
              }

        $('#demo-pie-2').pieChart({
          barColor: '#fbb03b',
          trackColor: '#eee',
          lineCap: 'butt',
          lineWidth: 8,
          onStep: function (from, to, percent) {
            $(this.element).find('.pie-value').text(Math.round(percent) + '%');
          }
        });
      })
    </script>
    <!--skycons-icons-->
    <script src="/static/js/skycons.js"></script>
    <!--//skycons-icons-->
  </head>
  <body>
  <div id="point1"></div>{# 这是一个锚点 #}
    <div id="wrapper">

      <!----->
      <div class="navbar-default navbar-static-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <h1> <a class="navbar-brand" href="consumers.html">监控系统</a></h1>
        </div>
        <div class=" border-bottom">
          <div class="full-left">

            <form class=" navbar-left-right">
              <input type="text"  value="Search..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search...';}">
              <input type="submit" value="" class="fa fa-search">

            </form>
            <div class="clearfix"> </div>
          </div>


          <!-- Brand and toggle get grouped for better mobile display -->
            <em  style="text-align: center;position:absolute;left: 50%;top:15px;color:#333"> 商品编号：<em id="goodsId" >{{goodsInfo.proCode}}</em> <em id="hardId" style="display: none">{{ goodsInfo.transerSensor }}</em> </em>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="drop-men" >
            <ul class=" nav_1">

              <li class="dropdown">

                <a href="signin.html" class="  dropdown-toggle" ><span class=" name-caret">返回登录页</span><img src="/static/images/consumers.png"></a>

              </li>

            </ul>
          </div><!-- /.navbar-collapse -->
          <div class="clearfix">

          </div>

          <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
              <ul class="nav" id="side-menu">

                <li>
                  <a href="#point1" class=" hvr-bounce-to-right"><i class="fa fa-dashboard nav_icon "></i><span class="nav-label">安全评估</span> </a>
                </li>


                <li>
                  <a href="#point2" class=" hvr-bounce-to-right"><i class="fa fa-inbox nav_icon"></i> <span class="nav-label">检疫和信息</span> </a>
                </li>

                <li>
                  <a href="#point3" class=" hvr-bounce-to-right"><i class="fa fa-picture-o nav_icon"></i> <span class="nav-label">投诉建议</span> </a>
                </li>

              </ul>
            </div>
          </div>
      </div>
      <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="content-main">

          <!--banner-->	
          <div class="banner">

            <h2>
              <a href="#point1">首页</a>
              <i class="fa fa-angle-right"></i>
              <span>安全评估</span>
            </h2>
          </div>
          <!--//banner-->
          <!--content-->
          <div class="content-top">


            <div class="col-md-4 ">
              <div class="content-top-1 ">
                <div class="col-md-6 top-content">
                  <h5>综合评估</h5>
                  <label id="warning"></label>
                </div>
                <div class="col-md-6 top-content1">	   
                  <div id="demo-pie-1" class="pie-title-center" data-percent='{{ goodsInfo.evaluate}}'> <span class="pie-value"></span> </div>
                </div>
                <div class="clearfix"> </div>
              </div>
              <div class="content-top-1">
                <div class="col-md-6 top-content">
                  <h5>剩余保质期</h5>
                  <label id="expirate">{{ expirate.date }}<em>天</em></label>
                </div   >
                <div class="col-md-6 top-content1">
                  <div id="demo-pie-2" class="pie-title-center" data-percent={{ expirate.data }}> <span class="pie-value"></span> </div>
                </div>
                <div class="clearfix"> </div>
              </div>

            </div>
            <div class="col-md-8 content-top-2">
              <!---start-chart---->
              <!----->
              <div class="content-graph">
                <div class="content-color">

                  <div class="content-ch1"><p><i></i>湿度</p><span id="avgH"> 0</span>
                    <div class="clearfix"> </div>
                  </div>
                    <div class="content-ch"><p><i></i>温度 </p><span id = 'avgT'>0</span>
                    <div class="clearfix"> </div>
                  </div>
                </div>
                <!--graph-->
                <link rel="stylesheet" href="/static/css/graph.css">
                <!--//graph-->
                <script src="/static/js/jquery.flot.js"></script>
                <script type="text/javascript">
                  var tempData = [];
                  var humData = [];
                  var avgtempData = 0.0;
                  var avghumData = 0.0;
                  function poltPint() {
                      $.ajax({
                           'url':'/ajax_get_temp_hum',
                           'type':'post',
                           'dataType':'json',
                           'data':{'hardId':$('#hardId').html()}
                       }).success(function (data) {
                            tempData = data.tempData;
                            humData = data.humData;
                            avgtempData = data.avgtempData;
                            avghumData = data.avghumData;

                      });
                      $('#avgT').html(avgtempData);
                      $('#avgH').html(avghumData);
                      var graphData = [{
                      // Visits
                      {#data: [ [6,24.1], [7, 26.7], [8, 34.0], [9, 31.9], [10, 31.5], [11, 27.1], [12, 25.4], [13, 33.6], [14, 27.1], [15, 26.9] ],#}
                       data: tempData,
                       color: '#999999'
                    }, {
                      // Returning Visits
                      {#data: [ [6, 58], [7, 56], [8, 54], [9, 55], [10, 55], [11, 55], [12, 55], [13, 58], [14, 58], [15, 57] ],#}
                        data: humData,
                        color: '#d0cb2e',
                      points: { radius: 2, fillColor: '#7f8c8d' }
                    }
                    ];

                    // Lines Graph #############################################
                    $.plot($('#graph-lines'), graphData, {
                      series: {
                        points: {
                          show: true,
                          radius: 2
                        },
                        lines: {
                          show: true
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                        {#tickSize: 1000#}
                          tickSize:28
                      }
                    });

                    // Bars Graph ##############################################
                    $.plot($('#graph-bars'), graphData, {
                      series: {
                        bars: {
                          show: true,
                          barWidth: .9,
                          align: 'center'
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                        {#tickSize: 1000  TODO#}
                          tickSize:28
                      }
                    });

                    // Graph Toggle ############################################
                    $('#graph-bars').hide();

                    $('#lines').on('click', function (e) {
                      $('#bars').removeClass('active');
                      $('#graph-bars').fadeOut();
                      $(this).addClass('active');
                      $('#graph-lines').fadeIn();
                      e.preventDefault();
                    });

                    $('#bars').on('click', function (e) {
                      $('#lines').removeClass('active');
                      $('#graph-lines').fadeOut();
                      $(this).addClass('active');
                      $('#graph-bars').fadeIn().removeClass('hidden');
                      e.preventDefault();
                    });

                    // Tooltip #################################################
                    function showTooltip(x, y, contents) {
                      $('<div id="tooltip">' + contents + '</div>').css({
                        top: y - 16,
                        left: x + 20
                      }).appendTo('body').fadeIn();
                    }

                    var previousPoint = null;

                    $('#graph-lines, #graph-bars').bind('plothover', function (event, pos, item) {
                      if (item) {
                        if (previousPoint != item.dataIndex) {
                          previousPoint = item.dataIndex;
                          $('#tooltip').remove();
                          var x = item.datapoint[0],
                            y = item.datapoint[1];
                          showTooltip(item.pageX, item.pageY, y );
                        }
                      } else {
                        $('#tooltip').remove();
                        previousPoint = null;
                      }
                    });

                  };
                  function checkAdvise() {
                      alert('hah');
                      $.ajax({
                           'url':'/ajax_check_advise',
                           'type':'post',
                           'dataType':'json',
                           'data':{'goodsId':$('#goodsId').html()}
                       }).success(function (data) {
                            if(data.res == 1){
                                $('#advise_display').show();
                                $('#advise').hide();
                                if (data.adDealSupermarket == 1){
                                    $("#supAdvise").css('background',"#5cb85c");
                                    if(data.adDealManger == 1){
                                         $("#manAdvise").css('background',"#5cb85c");
                                        if(data.adDealFinish == 1){
                                             $("#finAdvise").css('background',"#5cb85c");
                                        }
                                    }
                                }
                            }
                      });
                  };
                  function submitBtn() {

                      $('#submitBtn').click(function () {
                            var $subName = $('#subName').val();
                            var $goodsId = $('#goodsId').html();
                            var $subTel = $('#subTel').val();
                            var $subMail = $('#subMail').val();
                            var $subIdCard = $('#subIdCard').val();
                            var $subContent = $('#subContent').val();

                            {#alert($subName+$goodsId+$subTel+$subMail+$subIdCard+$subContent);#}
                           $.ajax({
                               'url':'/ajax_consumers_submit',
                               'type':'post',
                               'dataType':'json',
                               'data':{'subName':$subName,'goodsId':$goodsId,
                                   'subTel':$subTel,'subMail':$subMail,
                                   'subIdCard':$subIdCard,'subContent':$subContent}
                           }).success(function (data) {
                               if (data.res == '0'){
                                   alert('提交失败，请重置并重新提交正确数据');
                               }
                               else{
                                   alert('提交成功，请确认返回');
                                   checkAdvise();
                               }
                          }).fail(function () {
                               alert('提交失败，请重置并重新提交正确数据');
                           });
                        });
                  };
                  $(document).ready(function () {
                      checkAdvise();
                      submitBtn();
                      setInterval(poltPint,5000);
                  });
                </script>
                <div class="graph-container">

                  <div id="graph-lines"> </div>
                  <div id="graph-bars"> </div>
                </div>

              </div>
            </div>
            <div class="clearfix"> </div>
          </div>
          <!---->
<div id="point2"></div>
<div class="content-mid">
    <div class="banner">

            <h2>
              <a href="#point1">首页</a>
              <i class="fa fa-angle-right"></i>
              <span>检疫和信息</span>
            </h2>
          </div>
</div>
          <div class="content-main">

            <div class="col-md-5">

              <div class="cal1 cal_2"><div class="clndr"><div class="clndr-controls"><div class="clndr-control-button"><p class="clndr-previous-button">previous</p></div><div class="month">July 2015</div><div class="clndr-control-button rightalign"><p class="clndr-next-button">next</p></div></div><table class="clndr-table" border="0" cellspacing="0" cellpadding="0"><thead><tr class="header-days"><td class="header-day">S</td><td class="header-day">M</td><td class="header-day">T</td><td class="header-day">W</td><td class="header-day">T</td><td class="header-day">F</td><td class="header-day">S</td></tr></thead><tbody><tr><td class="day adjacent-month last-month calendar-day-2015-06-28"><div class="day-contents">28</div></td><td class="day adjacent-month last-month calendar-day-2015-06-29"><div class="day-contents">29</div></td><td class="day adjacent-month last-month calendar-day-2015-06-30"><div class="day-contents">30</div></td><td class="day calendar-day-2015-07-01"><div class="day-contents">1</div></td><td class="day calendar-day-2015-07-02"><div class="day-contents">2</div></td><td class="day calendar-day-2015-07-03"><div class="day-contents">3</div></td><td class="day calendar-day-2015-07-04"><div class="day-contents">4</div></td></tr><tr><td class="day calendar-day-2015-07-05"><div class="day-contents">5</div></td><td class="day calendar-day-2015-07-06"><div class="day-contents">6</div></td><td class="day calendar-day-2015-07-07"><div class="day-contents">7</div></td><td class="day calendar-day-2015-07-08"><div class="day-contents">8</div></td><td class="day calendar-day-2015-07-09"><div class="day-contents">9</div></td><td class="day calendar-day-2015-07-10"><div class="day-contents">10</div></td><td class="day calendar-day-2015-07-11"><div class="day-contents">11</div></td></tr><tr><td class="day calendar-day-2015-07-12"><div class="day-contents">12</div></td><td class="day calendar-day-2015-07-13"><div class="day-contents">13</div></td><td class="day calendar-day-2015-07-14"><div class="day-contents">14</div></td><td class="day calendar-day-2015-07-15"><div class="day-contents">15</div></td><td class="day calendar-day-2015-07-16"><div class="day-contents">16</div></td><td class="day calendar-day-2015-07-17"><div class="day-contents">17</div></td><td class="day calendar-day-2015-07-18"><div class="day-contents">18</div></td></tr><tr><td class="day calendar-day-2015-07-19"><div class="day-contents">19</div></td><td class="day calendar-day-2015-07-20"><div class="day-contents">20</div></td><td class="day calendar-day-2015-07-21"><div class="day-contents">21</div></td><td class="day calendar-day-2015-07-22"><div class="day-contents">22</div></td><td class="day calendar-day-2015-07-23"><div class="day-contents">23</div></td><td class="day calendar-day-2015-07-24"><div class="day-contents">24</div></td><td class="day calendar-day-2015-07-25"><div class="day-contents">25</div></td></tr><tr><td class="day calendar-day-2015-07-26"><div class="day-contents">26</div></td><td class="day calendar-day-2015-07-27"><div class="day-contents">27</div></td><td class="day calendar-day-2015-07-28"><div class="day-contents">28</div></td><td class="day calendar-day-2015-07-29"><div class="day-contents">29</div></td><td class="day calendar-day-2015-07-30"><div class="day-contents">30</div></td><td class="day calendar-day-2015-07-31"><div class="day-contents">31</div></td><td class="day adjacent-month next-month calendar-day-2015-08-01"><div class="day-contents">1</div></td></tr></tbody></table></div></div>
              <!----Calender -------->
              <link rel="stylesheet" href="/static/css/clndr.css" type="text/css" />
              <script src="/static/js/underscore-min.js" type="text/javascript"></script>
              <script src= "/static/js/moment-2.2.1.js" type="text/javascript"></script>
              <script src="/static/js/clndr.js" type="text/javascript"></script>
              <script src="/static/js/site.js" type="text/javascript"></script>
              <!----End Calender -------->
            </div>
            <div class="col-md-7 mid-content-top">
              <div class="middle-content">
                <h3>检疫检验证书</h3>
                <!-- start content_slider -->
                <div id="owl-demo" class="owl-carousel text-center">
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg1.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg2.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg3.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg4.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg5.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg6.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg7.jpg" alt="name">
                  </div>

                </div>
              </div>
              <!--//sreen-gallery-cursual---->
              <!-- requried-jsfiles-for owl -->
              <link href="/static/css/owl.carousel.css" rel="stylesheet">
              <script src="/static/js/owl.carousel.js"></script>
              <script>
                $(document).ready(function() {
          $("#owl-demo").owlCarousel({
            items : 3,
            lazyLoad : true,
            autoPlay : true,
            pagination : true,
            nav:true,
          });
        });
              </script>
              <!-- //requried-jsfiles-for owl -->
            </div>
              <div class="content-mid">
                  <div class="col-md-12 ">
              <div class="content-top-1 ">
                <div class="col-md-2 top-content">
                    <div class="item">
                    <img class="img-responsive" src="/static/images/factory.png" alt="factory">
                  </div>
                </div>
                  <div class="col-md-2 top-content">
                  <h5>工厂名称</h5>
                  <p class="info-label">{{ manEnterpriseInfo.userName }}</p>
                </div>
                  <div class="col-md-2 top-content">
                  <h5>工厂地址</h5>
                  <p class="info-label">{{ manEnterpriseInfo.userAddr }}</p>
                </div>
                  <div class="col-md-2 top-content">
                  <h5 class="info-label">出厂检验员</h5>
                      <div class="info-label"> <p>{{ goodsInfo.examiner }}</p></div>
                </div>
                  <div class="col-md-2 top-content">
                  <h5>客服电话</h5>
                  <p class="info-label">{{ manEnterpriseInfo.userTel }}</p>
                </div>

                <div class="clearfix"> </div>
              </div>
              <div class="content-top-1">
                <div class="col-md-2 top-content">
                  <div class="item">
                    <img class="img-responsive" src="/static/images/transport.png" alt="factory">
                  </div>
                </div>
                  <div class="col-md-2 top-content">
                  <h5>车辆牌照</h5>
                  <p class="info-label">{{ transInfo.userVehileNum }}</p>
                </div>
                  <div class="col-md-2 top-content">
                  <h5>所属机构</h5>
                  <p class="info-label">{{ transInfo.userName }}</p>
                </div>
                  <div class="col-md-2 top-content">
                  <h5>车辆责任人</h5>
                  <p class="info-label">{{ transInfo.userLawer }}</p>
                </div>
                  <div class="col-md-2 top-content">
                  <h5>安全评估</h5>

                  <p class="info-label">良</p>
                </div>

                <div class="clearfix"> </div>
              </div>

                <div class="content-top-1">
                <div class="col-md-2 top-content">
                  <div class="item">
                    <img class="img-responsive" src="/static/images/store.png" alt="factory">
                  </div>
                </div>
                <div class="col-md-2 top-content">
                  <h5>商超名称</h5>
                  <p class="info-label">{{ supererInfo.userName }}</p>
                </div>
                    <div class="col-md-2 top-content">
                  <h5>商超地址</h5>
                  <p class="info-label">{{ supererInfo.userAddr }}</p>
                </div>
                    <div class="col-md-2 top-content">
                  <h5>商超法人</h5>
                  <p class="info-label">{{ supererInfo.userLawer }}</p>
                </div>
                    <div class="col-md-2 top-content">
                  <h5>卫生评估</h5>
                  {% if supererInfo %}
                      <p class="info-label">优</p>
                  {%endif %}
                </div>
                    <div class="col-md-2 top-content">
                  <h5>冷藏设施编号</h5>
                    {% if goodsinfo %}
                        <p class="info-label">{{ goodsInfo.supererSnesor }}</p>
                    {% endif %}

                </div>
                <div class="clearfix"> </div>
              </div>
            </div>
              </div>

            <div class="clearfix"> </div>
          </div>
          <!----->
            <div id="point3"></div>
            <div class="content-main">

    <div class="banner">

            <h2>
              <a href="#point1">首页</a>
              <i class="fa fa-angle-right"></i>
              <span>投诉建议</span>
            </h2>
          </div>
</div>

          <div class="content-bottom">
            <div class="col-md-12 post-top">
 	<div class="validation-system">

 		<div class="validation-form">
 	<!---->
           <div class="grid_3 grid_5" id="advise_display" style="display: none">
             <h3 class="head-top"> 投诉进度</h3>
                 <div class="tab-content">
                      <div class="tab-pane active" id="domprogress">
                           <p>通常投诉会持续7~10个工作日，请耐心等待</p>
                          <div class="progress" style="height: 40px;">
                            <div class="progress-bar progress-bar-success" style="width: 25%"><span class="sr-only-focusable" style="position: relative;top: 12px">发起投诉 Complete (success)</span></div>
                            <div class="progress-bar progress-bar-success" style="width: 25%;background: #f2f4f8;" id="supAdvise"><span class="sr-only-focusable" style="position: relative;top: 12px;"> 商超处理 Complete(success)</span></div>
                            <div class="progress-bar progress-bar-success" style="width: 25%;background: #f2f4f8;"  id="manAdvise"><span class="sr-only-focusable" style="position: relative;top: 12px;">监督处理  (warning)</span></div>
                            <div class="progress-bar progress-bar-success" style="width: 25%;background: #f2f4f8;" id="finAdvise"><span class="sr-only-focusable" style="position: relative;top: 12px;">完成处理  (finished)</span></div>
                          </div>
                    </div>
               </div>
           </div>
        <form id="advise" action="" onsubmit="return func()" >
         	<div class="vali-form">
            <div class="col-md-4 form-group1">
              <label class="control-label">姓名</label>
              <input id="subName" type="text" placeholder="请输入真实的姓名" required="">
            </div>
            <div class="col-md-4 form-group1 form-last">
              <label class="control-label">电话</label>
              <input id="subTel" type="text" placeholder="请输入合法的电话号码" required="">
            </div>
            <div class="col-md-4 form-group1 group-mail">
              <label class="control-label">邮箱</label>
              <input id="subMail" type="text" placeholder="如果有邮箱，那么请输入" required="">
            </div>
            </div>
            <div class="col-md-6 form-group1 group-mail">
              <label class="control-label">身份证号</label>
              <input id="subIdCard" type="text" placeholder="填写本人的身份证号，我们将进行实名验证" required="">
            </div>
            <div class="col-md-6 form-group1 group-mail">
              <label class="control-label ">提交日期</label>
              <input type="date" class="form-control1 ng-invalid ng-invalid-required" ng-model="model.date" required="">
            </div>
            <div class="col-md-12 form-group1 ">
              <label class="control-label">投诉内容</label>
              <textarea id="subContent"  placeholder="请输入你的投诉描述" required="">Your Comment.....</textarea>
            </div>
             <div class="clearfix"> </div>
            <div class="col-md-12 form-group">
              <button id="submitBtn" type="submit"  class="btn btn-primary" style="disabled : True">提交</button>
              <button type="reset" class="btn consumers.html">重置</button>
            </div>
          <div class="clearfix"> </div>
        </form>

 	<!---->
 </div>

</div>

            </div>
            <div class="col-md-12">
              <div class="weather">
                <div class="weather-top">
                  <div class="weather-top-left">
                    <div class="degree">
                      <figure class="icons">
                        <canvas id="partly-cloudy-day" width="64" height="64">
                        </canvas>
                      </figure>
                      <span>37°</span>
                      <div class="clearfix"></div>
                    </div>
                      <script>
                      var icons = new Skycons({"color": "#1ABC9C"}),
  list  = [
    "clear-night", "partly-cloudy-day",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                    </script>
                    <p>FRIDAY
                    <label>13</label>
                    <sup>th</sup>
                    AUG
                    </p>
                  </div>
                  <div class="weather-top-right">
                    <p><i class="fa fa-map-marker"></i>lorem ipsum</p>
                    <label>lorem ipsum</label>
                  </div>
                  <div class="clearfix"> </div>
                </div>
                <div class="weather-bottom">
                  <div class="weather-bottom1">
                    <div class="weather-head">
                      <h4>Cloudy</h4>
                      <figure class="icons">
                        <canvas id="cloudy" width="58" height="58"></canvas>
                      </figure>					
                      <script>
                        var icons = new Skycons({"color": "#999"}),
  list  = [
    "clear-night", "cloudy",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                      </script>
                      <h6>20°</h6>
                      <div class="bottom-head">
                        <p>August 16</p>
                        <p>Monday</p>
                      </div>
                    </div>
                  </div>
                  <div class="weather-bottom1 ">
                    <div class="weather-head">
                      <h4>Sunny</h4>
                      <figure class="icons">
                        <canvas id="clear-day" width="58" height="58">
                        </canvas>				
                      </figure>					
                      <script>
                        var icons = new Skycons({"color": "#999"}),
  list  = [
    "clear-night", "clear-day",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                      </script>
                      <h6>37°</h6>
                      <div class="bottom-head">
                        <p>August 17</p>
                        <p>Tuesday</p>
                      </div>
                    </div>
                  </div>
                  <div class="weather-bottom1">
                    <div class="weather-head">
                      <h4>Rainy</h4>
                      <figure class="icons">
                        <canvas id="sleet" width="58" height="58">
                        </canvas>
                      </figure>
                      <script>
                        var icons = new Skycons({"color": "#999"}),
  list  = [
    "clear-night", "clear-day",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                      </script>

                      <h6>7°</h6>
                      <div class="bottom-head">
                        <p>August 18</p>
                        <p>Wednesday</p>
                      </div>
                    </div>
                  </div>
                  <div class="weather-bottom1 ">
                    <div class="weather-head">
                      <h4>Snowy</h4>
                      <figure class="icons">
                        <canvas id="snow" width="58" height="58">
                        </canvas>
                      </figure>
                      <script>
                        var icons = new Skycons({"color": "#999"}),
  list  = [
    "clear-night", "clear-day",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                      </script>
                      <h6>-10°</h6>
                      <div class="bottom-head">
                        <p>August 16</p>
                        <p>Thursday</p>
                      </div>
                    </div>
                  </div>
                  <div class="clearfix"> </div>
                </div>

              </div>
            </div>
            <div class="clearfix"> </div>
          </div>
          <!--//content-->



          <!---->
          <div class="copy">
            <p> &copy; 2020 冷链物流监控系统. All Rights Reserved | Design by <a href="signin.html" target="_blank">Logistic</a> </p>
          </div>
        </div>
        <div class="clearfix"> </div>
      </div>
        </div>
        <!---->
        <!--scrolling js-->
        <script src="/static/js/jquery.nicescroll.js"></script>
        <script src="/static/js/scripts.js"></script>
        <!--//scrolling js-->
        <script src="/static/js/bootstrap.min.js"> </script>
  </body>
</html>

